<!doctype html>
<html>
<head>
	<meta charset="utf-8"><meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<title>我的</title>
	<link rel="stylesheet" type="text/css" href="../../lib/css/skin.css"/>
	<link rel="stylesheet" type="text/css" href="../../lib/css/mobiscroll.css"/>
</head>
<body>
<div id="root">
	<div class="app_warp">

		<div class="app_head">
			<span class="left back"></span>
			<span class="name">添加学生</span>
			<span class="right" tapmode onclick="addXueSheng()">
				下一步
			</span>
		</div>

		<div id="add_students" class="app_main">
			<div class="nocontent animated fadeInUp">
				<img src="../../lib/img/loading.gif" class="minimize" alt="">
				<div class="text minimize">
					数据加载中
				</div>
			</div>
		</div>
	</div>
</div>
<script id="add_students_template" type="text/html">
	<div class="steps clearfix">
		<div class="step animated fadeIn">
			<span class="num">第一步 : 输入学生手机号</span>
			<div class="add_user_phone">
				<input id="add_user_phone" type="number" placeholder="请输入学生的手机号">
			</div>
		</div>
		<div class="step animated fadeIn hide">
			<span class="num">第二步 : 录入学生基本信息</span>
			<ul class="app_formlist">
				<li>
					<span class="name">
						姓名
					</span>
					<span class="val">
						<input id="student_name" type="text" placeholder="请输入学生姓名">
					</span>
				</li>
				<li class="in">
					<span class="name">
						性别
					</span>
					<span class="val">
						<select id="student_sex" class="hide formelm">
							<option value="">请选择</option>
							<option value="1">男</option>
							<option value="2">女</option>
						</select>
					</span>
				</li>
				<li>
					<span class="name">
						年龄
					</span>
					<span class="val">
						<input id="student_age" class="student_num" type="number" placeholder="请填入年龄">
					</span>
				</li>
				<li class="space"></li>
				<li class="in">
					<span class="name">
						省份
					</span>
					<span id="sel_student_province" class="val"></span>
				</li>
				<li>
					<span class="name">
						目前就读学校
					</span>
					<span class="val">
						<input id="student_currentschool" type="text" placeholder="填写目前就读的学校">
					</span>
				</li>
				<li class="space"></li>
				<li class="noborder">
					<span class="name">
						艺考方向
					</span>
					<span class="val">
						<span class="intro">
							点击下方标签选择
						</span>
					</span>
				</li>
				<li id="sel_classify" class="checks_cont">
					<% for(var i in classify){if(i>0){ %>
					<a data_id="<%:=classify[i].id %>" href="javascript:;">
						<%:=classify[i].name %>
					</a>
					<% }} %>
				</li>
				<li class="in">
					<span class="name">
						目标院校
					</span>
					<span class="val">
						<input id="student_targetschool" readonly="readonly" type="text" placeholder="请填写目标学校">
					</span>
				</li>
				<li>
					<span class="name">
						文化分
					</span>
					<span class="val">
						<input id="student_achievement" type="number" class="student_num" placeholder="文化分">
					</span>
				</li>
			</ul>
		</div>
		<div class="step animated fadeIn hide">
			<span class="num">第三步 : 选择学生拥有的课程</span>
			<ul id="tcourse_sels">
				<%for(var kc in tcourse){%>
				<li data_id="<%:=tcourse[kc].id%>">
					<%:=tcourse[kc].name%>
				</li>
				<%}%>
			</ul>
			<div class="space"></div>
		</div>
	</div>
</script>
<script id="sel_student_province_template" type="text/html">
	<select id="student_province">
		<% for(var i in provinceData){ var province = provinceData[i] %>
		<option value="<%:=province.id%>"><%:=province.name%></option>
		<% } %>
	</select>
</script>
<script>
	var
		step=0,
		pageData={
			phone: null,
			student: {
				name: undefined,
				age: undefined,
				sex: undefined,
				area: undefined,
				currentschool: undefined,
				target: undefined,
				targetschool: undefined,
				achievement: undefined
			},
			tcourse: null
		},
		viewStudentIntro=function(data){
			console.log(JSON.stringify(data));
		},
		addXueSheng = function () {
			var elm = $('.step');
			if (step === 0) {
				var val = $('#add_user_phone').val();
				if(!_$.dataTest('phone',val)){
					api.toast({
						msg: '输入有效的手机号'
					})
					return false;
				}else{
					pageData.phone=val;
					_$.ajax({
						interface: 'testStudentPhone',
						data: {
							phone: val
						},
						call: function (data) {
							if(data.status===200){
								if(data.type===201){
									api.toast({
										msg: '该手机号被机构占用,请核对号码或与管理员联系。'
									})
									return false;
								}else if(data.type===202){
									step++;
								}else if(data.type===200){
									api.openWin({
										name:'view_xuesheng',
										url:'./view_xuesheng.html',
										pageParam: data.data
									})
									api.execScript({
										name:'xuesheng',
										script:'loadData()'
									})
									_$.sleep(function(){
										api.closeWin({
											name:api.winName
										});
									},1000)
								}else{
									api.toast({
										msg: data.msg
									})
									return false;
								}
							}else{
								api.toast({
									msg: data.msg
								})
								return false;
							}
							elm.addClass('hide').eq(step).removeClass('hide');
						}
					})
				}
			} else if (step === 1) {
				//声明变量，用来存储提交数据的那些input的值
				var _student_ = pageData.student;
				_student_.avatar = $('#student_avatar').attr('src');
				_student_.name = $('#student_name').val();
				_student_.age = parseInt($('#student_age').val());
				_student_.currentschool = $('#student_currentschool').val();
				_student_.achievement = parseInt($('#student_achievement').val());

				if (_student_.avatar === '../../lib/img/default_student_avatar.png') {
					_student_.avatar = null;
				}
				if (!_$.dataTest('notempty', _student_.name)) {
					api.toast({
						msg: '没有填写姓名'
					})
					return false;
				}
				if (!_$.dataTest('num', _student_.sex)) {
					api.toast({
						msg: '没有选择性别'
					})
					return false;
				}
				if (!_$.dataTest('num', _student_.age)) {
					api.toast({
						msg: '没有填写年龄'
					})
					return false;
				}
				if (!_$.dataTest('num', _student_.province)) {
					api.toast({
						msg: '没有选择省份'
					})
					return false;
				}
				if (!_$.dataTest('notempty', _student_.currentschool)) {
					api.toast({
						msg: '没有填写目前就读的学校'
					})
					return false;
				}
				if (!_$.dataTest('notempty', _student_.currentschool)) {
					api.toast({
						msg: '没有填写目前就读的学校'
					})
					return false;
				}
				if (_$.getType(_student_.target) !== 'array' || _student_.target.length === 0) {
					api.toast({
						msg: '需要选择至少一项艺考方向'
					})
					return false;
				}
				if (_student_.targetschool === undefined) {
					api.toast({
						msg: '没有选择目标院校'
					})
					return false;
				}
				if (!_$.dataTest('num', _student_.achievement)) {
					api.toast({
						msg: '没有填写文化分'
					})
					return false;
				}

				step++;
				elm.addClass('hide').eq(step).removeClass('hide');

			} else {
				submitData()
			}
		},
		submitData=function(){

			_$.ajax({
				interface: 'addMyStudent',
				data: {
					user:pageData.student,
					phone:pageData.phone,
					tcourse:pageData.tcourse
				},
				call: function (data) {
					if(data.status===200){
						api.toast({
							msg: '添加成功'
						})
						api.execScript({
							name:'xuesheng',
							script:'loadData()'
						})
						_$.sleep(function(){
							api.closeWin({
								name:api.winName
							});
						},1500)
					}else{
						api.toast({
							msg: data.msg
						})
						return;
					}

				}
			})
		},
		//获取选择的目标院校的方法
		setKeyWord = function (key, id) {
			pageData.student.targetschool=id;
			$('#student_targetschool').val(key);
		},
		appready = function () {

			_$.db.get({
				key: 'classify',
				call: function (classify) {
					_$.db.get({
						call:function(udb){
							_$.template('add_students_template', {
								data: pageData.student,
								classify: classify,
								tcourse: udb.tcourse
							}, function (html) {
								$('#add_students').html(html);
								//机构选择专业和学生选择艺考专业的逻辑
								$('#sel_classify a').on('click', function () {
									$(this).toggleClass('active');
									var _allElm = $('#sel_classify a.active'),
										_arr = [];
									_allElm.map(function (i, j) {
										_arr.push(parseInt($(j).attr('data_id')))
									});
									pageData.student.target = _arr;
								})

								$('#student_sex').mobiscroll().select({
									mode: 'scroller',
									display: 'bottom',
									lang: 'zh',
									placeholder: '请选择性别',
									onSelect: function (valueText, inst) {
										var val = parseInt($('#student_sex').val());
										pageData.student.sex = val === 0 ? undefined : val;
									}
								});
								$("#student_targetschool").on('click', function () {
									api.openWin({
										name: 'targetschool',
										url: 'targetschool.html',
										pageParam: {
											win: api.winName
										}
									})
								})

								$('#tcourse_sels li').on('click',function(){
									$(this).toggleClass('active');
									var _all = $('#tcourse_sels li.active');
									if (_all.length > 0) {
										pageData.tcourse = [];
										for (var i = 0; i < _all.length; i++) {
											pageData.tcourse.push(_all.eq(i).attr('data_id'));
										}
									} else {
										pageData.tcourse = null;
									}
								})

								_$.template('sel_student_province_template', __areaData__, function (html) {
									$('#sel_student_province').html(html);
									$('#student_province').mobiscroll().select({
										mode: 'scroller',
										display: 'bottom',
										lang: 'zh',
										placeholder: '请选择省份',
										onSelect: function (valueText, inst) {
											pageData.student.province = undefined;
											for (var i in __areaData__.provinceData) {
												if (!pageData.student.province && __areaData__.provinceData[i].name == valueText) {
													pageData.student.province = __areaData__.provinceData[i].id;
												}
											}
										}
									});
								});

							})
						}
					})
				}
			});

		};
</script>
<script src="../../lib/js/config.js"></script>
<script src="../../lib/js/areaData.js"></script>
<script src="../../lib/js/jquery.js"></script>
<script src="../../lib/js/jquery.mobiscroll.js"></script>
<script src="../../lib/js/common.js"></script>
</body>
</html>